<template>
  <!-- 辅助表二 分车分日期报表新增-->
  <div class="tb">
    <mt-header fixed title="道路货物运输量专项调查" style="z-index: 999999;">
      <span slot="left" @click="goBack">
        <mt-button icon="back" slot="left">返回</mt-button>
      </span>
    </mt-header>
    <mt-field label="车牌号:" placeholder="请输入" type="text" :readonly=true v-model="vehicleNo"></mt-field>
    <mt-field label="车牌颜色:" placeholder="请输入" type="text" :readonly=true v-model="plateColorCode"></mt-field>
    <mt-field label="日期:" placeholder="请输入起止日期(如：2-6)" type="text" v-model="fzdcbfd22019002"></mt-field>
    <mt-field label="趟次数:" placeholder="请输入" type="number" v-model="fzdcbfd22019003"></mt-field>
    <mt-field label="货运量(吨):" placeholder="请输入" type="number" v-model="fzdcbfd22019004"></mt-field>
    <mt-field label="货运周转量(吨公里):" placeholder="请输入" type="number" v-model="fzdcbfd22019005"></mt-field>
    <mt-field label="平均运距(公里):" placeholder="请输入" type="number" v-model="fzdcbfd22019006"></mt-field>
    <mt-field label="集装箱箱运量(TEU):" placeholder="请输入" type="number" v-model="fzdcbfd22019007"></mt-field>
     <mt-field
      label="货类1名称:"
      :placeholder="fzdcbfd22019008"
      type="text"
      v-model="hlytags.name"
      :readonly="true"
      @click.native.capture="choseHwzl('hlymc')"
    ></mt-field>
    <mt-field label="货类1货运量（吨）:" placeholder="请输入" type="number" v-model="fzdcbfd22019009"></mt-field>
    <mt-field
      label="货类2名称:"
      :placeholder="fzdcbfd22019010"
      type="text"
      v-model="hlertags.name"
      :readonly="true"
      @click.native.capture="choseHwzl('hlermc')"
    ></mt-field>
    <mt-field label="货类2货运量（吨）:" placeholder="请输入" type="number" v-model="fzdcbfd22019011"></mt-field>
    <mt-field
      label="货类3名称:"
      :placeholder="fzdcbfd22019012"
      type="text"
      v-model="hlstags.name"
      :readonly="true"
      @click.native.capture="choseHwzl('hlsmc')"
    ></mt-field>
    <mt-field label="货类3货运量（吨）:" placeholder="请输入" type="number" v-model="fzdcbfd22019013"></mt-field>
    <div class="button">
      <mt-button type="primary" size="large" @click="check">确定</mt-button>
    </div>
     <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom"
    >
      <mt-picker :slots="slots" showToolbar ref="picker" value-key="name">
        <div class="picker-toolbar-title">
          <div class="usi-btn-cancel" @click="popupVisible = !popupVisible">取消</div>
          <div class>{{message}}</div>
          <div class="usi-btn-sure" @click="handleConfig">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
  </div>
</template>
    
    <script>
import { Field } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      recid: "",
      yhmlk: "",
      companyType:'',// 企业类型
      vehicleNo:'',// 车牌号码
      plateColorCode:"",//车辆颜色
      fzdcbfd22019001: "",
      fzdcbfd22019002: "",
      fzdcbfd22019003: "",
      fzdcbfd22019004: "",
      fzdcbfd22019005: "",
      fzdcbfd22019006: "",
      fzdcbfd22019007: "",
      fzdcbfd22019008: "",
      fzdcbfd22019009: "",
      fzdcbfd22019010: "",
      fzdcbfd22019011: "",
      fzdcbfd22019012:'',
      fzdcbfd22019013:'',
       //
      showToolbar: true,
      slots: [
        {
          values: []
        }
      ],
      popupVisible: false,
      currentTags: {},
      hlytags:{},
      hlertags:{},
      hlstags:{},
      message: "",
      flag: "hlymc",
      userInfo:{}
    };
  },
  watch: {
    // 监听货运量、平均运距和周转量 add by qzn 20190704

    // 监听货运周转量
    fzdcbfd22019005(newVal) {
      // 平均运距= 周转量/货运量
      this.fzdcbfd22019006 =
        parseFloat(newVal) / parseFloat(this.fzdcbfd22019004);
    },
    // 监听平均运距 
    fzdcbfd22019006(newVal) {
      // 周转量 = 平均运距*货运量
      this.fzdcbfd22019005 = parseFloat(this.fzdcbfd22019004) * newVal;
    }
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem('userInfo')||{});
    this.vehicleNo=this.userInfo.vehicleNo;
    this.plateColorCode=this.userInfo.plateColorCode;
  },
  mounted() {
    this.getDate();
  },
  methods: {
    goBack() {
      //点击后退
      this.$router.go(-1);
    },
    getDate() {
      let data = {};
      data.companyType=this.userInfo.companyType
      data.recid = this.$route.query.recid;
      console.log("recid-->>"+JSON.stringify(data))
      this.axios
        .post(
          "http://zxdc.catsic.com:9090/sampling/sjAssit/selectFzdcbfd02ForSJ",
          { data: data },
          {
            headers: {
              "Content-Type": "application/json",
              mobileHeader:
                '{"sessionId":' + localStorage.getItem("sessionId") + "}"
            }
          }
        )
        .then(
          result => {
            // console.log('result02-->>'+JSON.stringify(result))
            if (result.data.status == "1000") {
              let fzdcbfd02 = result.data.data.Fzdcbfd01;
              (this.recid = fzdcbfd02.recid),
                (this.yhmlk = fzdcbfd02.yhmlk),
                (this.fzdcbfd22019001 = fzdcbfd02.fzdcbfd22019001),
                (this.fzdcbfd22019002 = fzdcbfd02.fzdcbfd22019002),
                (this.fzdcbfd22019003 = fzdcbfd02.fzdcbfd22019003),
                (this.fzdcbfd22019004 = fzdcbfd02.fzdcbfd22019004),
                (this.fzdcbfd22019005 = fzdcbfd02.fzdcbfd22019005),
                (this.fzdcbfd22019006 = fzdcbfd02.fzdcbfd22019006),
                (this.fzdcbfd22019007 = fzdcbfd02.fzdcbfd22019007),
                (this.fzdcbfd22019008 =fzdcbfd02.fzdcbfd22019008),// 货类1名称
                (this.hlytags.name =this.getGoodsTypeNmae(fzdcbfd02.fzdcbfd22019008)),// 货类1名称
                (this.fzdcbfd22019009 = fzdcbfd02.fzdcbfd22019009),
                (this.fzdcbfd22019010 = fzdcbfd02.fzdcbfd22019010),// 货类2名称
                (this.hlertags.name = this.getGoodsTypeNmae(fzdcbfd02.fzdcbfd22019010)),// 货类2名称
                (this.fzdcbfd22019011 = fzdcbfd02.fzdcbfd22019011),
                (this.fzdcbfd22019012 = fzdcbfd02.fzdcbfd22019012),// 货类3名称
                (this.hlstags.name = this.getGoodsTypeNmae(fzdcbfd02.fzdcbfd22019012)),// 货类3名称
                (this.fzdcbfd22019013 = fzdcbfd02.fzdcbfd22019013),
                (this.floatorder = fzdcbfd02.floatorder),
                console.log(result);
            }
          },
          error => {
            console.log("getyhcars request error:" + error);
          }
        );
    },
    // 校验条件
    check(){
      //获取不到值后重置成空字符
      if(this.fzdcbfd22019004==undefined){this.fzdcbfd22019004=""}
      if(this.fzdcbfd22019009==undefined){this.fzdcbfd22019009=""}
      if(this.fzdcbfd22019011==undefined){this.fzdcbfd22019011=""}
      if(this.fzdcbfd22019013==undefined){this.fzdcbfd22019013=""}
      if(this.fzdcbfd22019002 == ''){
          Toast("日期不能为空！");
      } else if(this.fzdcbfd22019002.indexOf("-") == -1 || this.fzdcbfd22019002.length > 5|| this.fzdcbfd22019002.length < 3){
          Toast("日期只能是数字-数字，如2-6！");
      } else if(this.fzdcbfd22019003 == ''){
          Toast("趟次数不能为空！");
      } else if(this.fzdcbfd22019004 == ''){
          Toast("货运量不能为空！");
      } else if(this.fzdcbfd22019005 == ''){
          Toast("货运周转量不能为空！");
      } else if(this.fzdcbfd22019008 != '' && this.fzdcbfd22019010 !='' && this.fzdcbfd22019008 == this.fzdcbfd22019010){
          Toast("货类1名称和货类2名称重复，请修改！");
      } else if(this.fzdcbfd22019008 != '' && this.fzdcbfd22019012 !='' && this.fzdcbfd22019008 == this.fzdcbfd22019012){
          Toast("货类1名称和货类3名称重复，请修改！");
      }  else if(this.fzdcbfd22019010 != '' && this.fzdcbfd22019012 !='' && this.fzdcbfd22019010 == this.fzdcbfd22019012){
          Toast("货类2名称和货类3名称重复，请修改！");
      } else if(parseFloat(this.fzdcbfd22019004==""?0:this.fzdcbfd22019004) < (parseFloat(this.fzdcbfd22019009==""?0:this.fzdcbfd22019009) + parseFloat(this.fzdcbfd22019011==""?0:this.fzdcbfd22019011)+parseFloat(this.fzdcbfd22019013==""?0:this.fzdcbfd22019013))){
          Toast("货运量大于等于个货类货运量之和，请修改！");
      } else {
        this.commit();
      }
    },
    commit() {
      let data = {};
      let fzdcbfd02 = {};

      if(this.fzdcbfd22019007 == undefined){this.fzdcbfd22019007=""}
      if(this.fzdcbfd22019008 == undefined){this.fzdcbfd22019008=""}
      if(this.fzdcbfd22019009 == undefined){this.fzdcbfd22019009=""}
      if(this.fzdcbfd22019010 == undefined){this.fzdcbfd22019010=""}
      if(this.fzdcbfd22019011 == undefined){this.fzdcbfd22019011=""}
      if(this.fzdcbfd22019012 == undefined){this.fzdcbfd22019012=""}
      if(this.fzdcbfd22019013 == undefined){this.fzdcbfd22019013=""}

      (fzdcbfd02.recid = this.recid),
        (fzdcbfd02.yhmlk = this.yhmlk = this.$route.query.yhmlk),
        (fzdcbfd02.fzdcbfd22019001 = this.vehicleNo),
        (fzdcbfd02.fzdcbfd22019024 = this.plateColorCode),
        
        (fzdcbfd02.fzdcbfd22019002 = this.fzdcbfd22019002),
        (fzdcbfd02.fzdcbfd22019003 = this.fzdcbfd22019003),
        (fzdcbfd02.fzdcbfd22019004 = this.fzdcbfd22019004),
        (fzdcbfd02.fzdcbfd22019005 = this.fzdcbfd22019005),
        (fzdcbfd02.fzdcbfd22019006 = this.fzdcbfd22019006),
        (fzdcbfd02.fzdcbfd22019007 = this.fzdcbfd22019007),
        (fzdcbfd02.fzdcbfd22019008 = this.fzdcbfd22019008),
        (fzdcbfd02.fzdcbfd22019009 = this.fzdcbfd22019009),
        (fzdcbfd02.fzdcbfd22019010 = this.fzdcbfd22019010),
        (fzdcbfd02.fzdcbfd22019011 = this.fzdcbfd22019011),
        (fzdcbfd02.fzdcbfd22019012 = this.fzdcbfd22019012),
        (fzdcbfd02.fzdcbfd22019013 = this.fzdcbfd22019013),
        (fzdcbfd02.floatorder = this.floatorder),
        (data.fzdcbfd02 = fzdcbfd02),
        console.log('data-->>'+JSON.stringify(data.fzdcbfd02))
        this.axios
          .post(
            "http://zxdc.catsic.com:9090/sampling/assit/modifyFzdcbfd02",
            { data: data },
            {
              headers: {
                "Content-Type": "application/json",
                mobileHeader:
                  '{"sessionId":' + localStorage.getItem("sessionId") + "}"
              }
            }
          )
          .then(
            result => {
              if (result.data.status == "1000") {
                console.log("保存成功");
                console.log(result);
                this.goback();
              }
            },
            error => {
              console.log("getyhcars request error:" + error);
            }
          );
    },
    
    // 选择货物种类
    choseHwzl(hwzl) {
      
        this.$http.get("http://zxdc.catsic.com:9090/sampling/json/carTyps").then(
        response => {
          switch (hwzl) {
            case "hlymc":
              this.message = "请选择货类1名称";
              this.flag = "hlymc";
              break;
            case "hlermc":
              this.message = "请选择货类2名称";
              this.flag = "hlermc";
              break;
            case "hlsmc":
              this.message = "请选择货类3名称";
              this.flag = "hlsmc";
              break;
          }
          this.slots[0].values = response.data.hwzl;
          this.popupVisible = true;
        },
        response => {
          console.log("数据加载失败");
        }
      );
    },
    // 弹出框点击确定按钮点击事件 add by qzn 20190627
    handleConfig: function() {
      this.currentTags = this.$refs.picker.getValues()[0];
      switch (this.flag) {
        case "hlymc":
            this.hlytags = this.currentTags;
            this.fzdcbfd22019008 = this.currentTags.code
          break;
        case "hlermc":
            this.hlertags = this.currentTags;
            this.fzdcbfd22019010 = this.currentTags.code
          break;
        case "hlsmc":
            this.hlstags = this.currentTags;
            this.fzdcbfd22019012 = this.currentTags.code
          break;
      }
      this.popupVisible = false;
    },
    goback() {
      this.$router.go(-1);
    },
    getGoodsTypeNmae(code) {// 获取货物类型名称显示在表格 add by qzn 20190704  
      var goodsTypes = [
        {
          code: "1",
          name: "煤炭及制品"
        },
        {
          code: "2",
          name: "金属矿石"
        },
        {
          code: "3",
          name: "矿建材料及水泥"
        },
        {
          code: "4",
          name: "机械设备电器"
        },
        {
          code: "5",
          name: "轻工医药产品"
        },
        {
          code: "6",
          name: "鲜活农产品"
        },
        {
          code: "9",
          name: "其他"
        }
      ];
      var name;
      goodsTypes.forEach(item => {
        if (item.code === code) {
          name = item.name;
        }
      });
      return name;
    }
  }
};
</script>
    
    <style lang="scss" scoped>
.tb {
  padding-top: 10px;
}

.mint-cell {
  background-color: #efeff4;
}
input[type="number"] {
  line-height: 21px;
  width: 100%;
  height: 40px;
  margin-bottom: 0px;
  padding: 10px 15px;
  -webkit-user-select: text;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  outline: 0;
  background-color: #fff;
  -webkit-appearance: none;
}
.button {
  padding-top: 3%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 5%;
}
.picker-toolbar-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 200px;
  line-height: 40px;
  font-size: 16px;
  width: 100%;
}
.usi-btn-cancel,
.usi-btn-sure {
  color: #26a2ff;
}
.mint-popup-bottom {
  width: 100%;
  top: auto;
  right: auto;
  bottom: 0;
}
</style>